#Javascript# 事件的传播机制

<div id="outer">
    <div id="inner"></div>
</div>
document.body.onclick = function(){
console.log('body');
}
outer.onclick = function(){
console.log('outer');
}

inner.onclick = function(){
console.log('inner');// inner  outer  body
}

事件传播有三个阶段（捕获--目标--冒泡）
Event.prototype
0: none 默认值，不代表任何的意思
1：capturing_phase:捕获阶段
2：at_target:目标阶段（当前事件源）
3：bubbling_phase:冒泡阶段

三个阶段处理的事情
点击inner，触发了inner的click事件
浏览器在执行inner的click绑定的方法之前
1.从整个页面document开始向内查找，把inner的祖先元素遍历一遍（为冒泡阶段的传播途径做准备）
2.接下来找到目标阶段找到当前事件源。把事件源上绑定的方法执行（没绑定方法就不执行了）
3.不仅触发了当前事件源的点击行为，而且浏览器会按照第一个阶段规划的传播路径，从内向外（inner -> outer->body->html->document）把祖先元素的click行为依次触发。

当前元素的某个事件行为被触发，它所有的祖先元素，相关的事件行为也会被依次触发，顺序是从内向外。如果祖先元素的这个行为绑定了方法，绑定的方法也会被触发执行，我们把事件的这种传播机制叫做冒泡传播

这个传播机制是所有浏览器的传播机制。